<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular indicator-dots autoplay>
				<swiper-item class="swiperitem" v-for="(item,index) in records" :key="index" v-if="item.isShow===1">
					<image
						:src="item.pictureUrl" >
					</image>
				</swiper-item>

				<swiper-item class="swiperitem" v-if="records.length==0">
					<image
						src="https://lnnu-tuchuang.oss-cn-guangzhou.aliyuncs.com/farm/2023-03-04/19435ad3-b2cc-43fe-8a99-713de06730a94914655788104521829.jpg">
					</image>
				</swiper-item>
			</swiper>
		</view>

		<view class="middle">
			<view class="showbox">
				教育
			</view>
			<view class="showbox">
				娱乐
			</view>
			<view class="showbox">
				科研
			</view>
			<view class="showbox">
				技术
			</view>
		</view>

		<!-- Adopted -->
		<view class="adopted" @click="checkIsAdopt">
			<view class="topview">
				<view class="pho">
					<image src="../../static/land2.png" mode=""></image>
				</view>
				<view class="word">
					我的土地
				</view>
			</view>

			<view class="check" >
				<view class="pho">
					<image src="../../static/circle.png" mode=""></image>
				</view>
				<view class="checkpho">
					<image src="../../static/check.png" mode=""></image>
				</view>
				<view class="adoptedland">
					<view class="topland">
						点击查看预约的土地
					</view>
					<view class="bottomland">
						每日呵护您的土地
					</view>
				</view>
			</view>
		</view>
		

		
	</view>
</template>


<script>
	import {
		checkReserve,BroadcastMapList
	} from '../../request/api.js'
	export default {
		data() {
			return {
				params:{
					current:1,
					pageSize:5
				},
				records:[]

			}

		},
		onShow() {
			// console.log(this.records);
			this.cardList()
		},
		//		//分享
		onShareTimeline(){
			return {
		      	path:"pages/my/my",  //不设置默认当前页面
		        title: "归园土地管理", 
		        imageUrl:"https://xingqiu-tuchuang-1256524210.cos.ap-shangha…23-02-02/ea369ef3-87b5-4756-b2fe-5ec5a46c2445.jpg" //不设置默认截取页面
		    }
		},
		onShareAppMessage(res) {
			// return eventHandler接收到的分享参数
			return {
				title: '归园土地管理', // 分享名称
				path: 'pages/index/index', 
				imageUrl: '', 
				success(shareTickets) {
					// console.log(shareTickets + '成功');
					uni.showToast({
						title: '提交成功',
						duration: 1500
					})
					// 转发成功
				},
				fail: function(res) {
					// console.log(res + '失败');
					// 转发失败
				},
				complete: function(res) {
					// 不管成功失败都会执行
				}
			}
		},
		methods: {
			cardList() {
				BroadcastMapList(this.params).then(res => {
					this.records = res.data.data.records
					// console.log(res);
				})
			},
			checkIsAdopt() {
				checkReserve().then(res=>{
					const token = uni.getStorageSync('token')
					if(token==''){
						uni.showToast({
							title:"请先登录",
							icon:"error"
						})
					}else {
						console.log(res);
						if(res.data.data.length>0) {
								uni.navigateTo({
									url: '../adoptionLand/adoptionLand'
								})
						}else {
							uni.showModal({
								title: '提示',
								content: '请先认养土地',
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/reservation/reservation',
											fail(error) {
												console.log(error)
											}
										})
									} else if (res.cancel) {
							
									}
								}
							});
						}
					}
					

				})
			},
			onPullDownRefresh() {
				// console.log('触发了下拉刷新')
				setTimeout(() => {
					uni.stopPullDownRefresh()
					const pages = getCurrentPages()
					//声明一个pages使用getCurrentPages方法
					const perpage = pages[pages.length - 1]
					//声明一个当前页面
					perpage.onLoad()  
					//执行刷新
				}, 1000)
			},
			toadopt() {
				uni.navigateTo({
					url: '/pages/adoptionLand/adoptionLand',
					fail(error) {
						console.log(error)
					}
				})
			}
		}
	}
	
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 93vh;
		background-color: rgb(242, 242, 242);
	}

	.swiper {
		width: 100%;
		height: 220px;
		margin: 0 0px 0 0px;
		border: 0;
	}

	.swiperitem image {
		width: 100%;
		height: 100%;
		margin: 0 0px 0 0px;
		border-radius: 10px;
	}

	@keyframes appear {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	.middle {
		width: 90%;
		height: 30%;
		background-color: #fff;
		margin: 7% auto 5%;
		border-radius: 10px;
		padding: 20px 10px;
		display: grid;
		grid-template-columns: repeat(2, 40%);
		/* 声明行间距和列间距 */
		grid-gap: 0 20px;
		/* 分别表示两行的高度 */
		align-items: center;
		justify-content: center;
		// align-content:center;
		align-self: center;
		box-sizing: border-box;
		box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
		animation: appear 2s ease 0s 1 normal forwards;

		.showbox {
			text-align: center;
			background-color: #e6f0d7;
			height: 8vh;
			line-height: 8vh;

			box-sizing: border-box;
			border-radius: 10px;
			font-size: 22px;
			color: #4095E5;

		}
	}

	.adopted {
		width: 100%;
		height: 36%;
		background-color: #fff;
		padding: 10px 0;
		border-radius: 10px 10px 0 0;
		box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

		.topview {
			display: flex;
			margin: 10px;

			.pho {
				width: 30px;
				height: 30px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.word {
				font-size: 20px;
				margin-left: 5px;
			}
		}

		.check {
			position: relative;
			// display: flex;
			// width: 100%;
			// height: 90%;
			margin: 15%;
			box-sizing: border-box;

			.pho {
				display: inline-block;
				width: 70px;
				height: 70px;
				vertical-align: middle;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.checkpho {
				position: absolute;
				top: 12px;
				left: 13px;
				width: 45px;
				height: 45px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.adoptedland {
				display: inline-block;
				margin: 10px;
				vertical-align: middle;

				.topland {
					font-size: 18px;
					color: black;
					margin: -5px 0 5px;
				}

				.bottomland {
					color: #9d9d9d;
				}

			}
		}
	}
</style>
